<script setup lang="ts">

import Header from './header/index.vue'
import Footer from './footer.vue'
import { ref } from 'vue';
import { useRouter } from 'vue-router'

const router = useRouter()
const route = useRouter() as any


const activeIndex = ref<string>('viewQuestionnaire')
const change = (data: string) => {

    if (data !== activeIndex.value) {
        router.push({ name: data })
        activeIndex.value = data
    }

}
</script>

<template>
    <div id="dw-layout">
        <el-container style="padding: 0px;">
            <el-header height="80" style="padding: 0px;">
                <Header/>
            </el-header>
            <el-container style="z-index: 1;">
                <el-container>
                    <el-main style="padding: 20px 0px;">
                        <router-view v-slot="{ Component }">
                            <keep-alive>
                                <component :is="Component" :key="route.name" />
                            </keep-alive>
                        </router-view>
                    </el-main>
                    <el-footer>
                        <Footer/>
                    </el-footer>
                </el-container>
            </el-container>
        </el-container>
    </div>
</template>

<style scoped>

</style>